<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
		<title>tracking.js - face alignment with images</title>
		<!--<link rel="stylesheet" href="css/demo.css">-->

		<script src="js/tracking-min.js"></script>
		<script src="js/face-min.js"></script>
		<script src="js/Landmarks.js"></script>
		<script src="js/Regressor.js"></script>

		<script src="js/dat.gui.min.js"></script>
		<!--<script src="js/stats.min.js"></script>-->

		<style>
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}
			
			body,
			html {
				width: 100%;
				height: 100%;
			}
			
			.demo-frame {
				width: 100%;
				height: 100%;
				position: relative;
			}
			
			#getFusion {
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
			}
			
			.rect,
			.circle {
				left: -1000px;
				position: absolute;
				top: -1000px;
			}
			
			.rect {
				border: 2px solid #a64ceb;
			}
			
			.circle {
				border-radius: 50%;
				box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
			}
			
			#avator {
				width: 100px;
				height: 100px;
				overflow: hidden;
				border-radius: 100%;
			}
			
			#avator>img {
				width: 100%;
			}
		</style>
	</head>

	<body>

		<div class="demo-frame">
			<div id="avator">

			</div>
			<div class="demo-container" style="width: 100%;height: 100%;">
				<img id="img" style="max-width: 500px;" src="img/333.jpg" />
			</div>
			<div id="canvasContainer">
				<canvas style="display: none;" id="mycanvas" width="1000px" height="1000px"></canvas>
			</div>
			<div id="getFusion" style="display: none;">
				<canvas id="canvas" width="" height=""></canvas>
			</div>
		</div>

		<script>
			//			function Fusion(targetImg,canvas,){
			//				
			//			}
			window.onload = function() {
				var imgData = new Image();
				imgData.src = document.getElementById("img").src;
				var width;
				var height;
				imgData.onload = function() {
					width = imgData.width;
					height = imgData.height;
					init(width, height);
				}

				function init(x, y) {
					var img = document.getElementById('img');
					var width = img.width;
					var height = img.height;
					var xishuX = x / width;
					var xishuY = y / height;
					var tracker = new tracking.LandmarksTracker();
					tracker.setInitialScale(4);
					tracker.setStepSize(2);
					tracker.setEdgesDensity(0.1);

					tracking.track('#img', tracker);

					tracker.on('track', function(event) {
						if(!event.data) return;
						var theFace;
						event.data.faces.forEach(function(rect) {
							console.log(rect);
							theFace = rect;
						});
						var canvas = document.getElementById("mycanvas");
						canvas.width = theFace.width * xishuX;
						canvas.height = theFace.height * xishuY;
						var faceCtx = canvas.getContext('2d');
						faceCtx.drawImage(img, theFace.x * xishuX, theFace.y * xishuY, theFace.width * xishuX, theFace.height * xishuY, 0, 0, theFace.width * xishuX, theFace.height * xishuY);
						convertCanvasToImage(document.getElementById("mycanvas"));

						function convertCanvasToImage(canvas) {
							var image = new Image();
							image.src = canvas.toDataURL("image/png");
							document.getElementById("avator").appendChild(image);
							document.getElementsByClassName("demo-container")[0].style.display = "none";
							document.getElementById("getFusion").style.display = "block";
							getfusion(image);
						}

					});

					function getfusion(imgs) {
						var imgsrc = ''
						var img = new Image();
						img.src = imgsrc;
						if(img.complete) {
							draw(img,imgs);
						} else {
							img.onload = function() {
								draw(img,imgs);
							}
						}

					}

				}

				function draw(img,imgs) {
					var xishu = img.height / img.width;
					img.width = getViewPortWidth();
					img.height = img.width * xishu;
					var canvas = document.getElementById("canvas");
					canvas.width = getViewPortWidth();
					canvas.height = getViewPortHeight();
					var left = getViewPortWidth()*.4;
					var top = getViewPortHeight()*.45;
					var xishus = imgs.height/imgs.width;
					var heights = 160*xishus;
					var ctx = canvas.getContext("2d");
					ctx.drawImage(imgs,110,280,160,heights);
					ctx.drawImage(img, 0, 0, img.width, img.height);
				}
				// 获取浏览器窗口的可视区域的宽度
				function getViewPortWidth() {
					return document.documentElement.clientWidth || document.body.clientWidth;
				}

				// 获取浏览器窗口的可视区域的高度
				function getViewPortHeight() {
					return document.documentElement.clientHeight || document.body.clientHeight;
				}
			};
		</script>

	</body>

</html>